<template>
    <div class="wpwork-preview-main user-form">
      <el-row class="wpwork-common-search-box" :gutter="16" style="margin-bottom: 10px;">
        <el-form @submit.native.prevent>
           <el-col :span="6">
            <el-form-item label="通信模式：">
              <el-select v-model="listQuery.sendType" clearable placeholder="--请选择--">
                <el-option label="平台-终端" value="1"></el-option>
                <el-option label="平台-终端" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="接收者：">
              <el-input v-model="listQuery.receivePerson"  placeholder="备注"
                        clearable @keyup.enter.native="search()" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发送者：">
              <el-input v-model="listQuery.sendPerson"  placeholder="备注"
                        clearable @keyup.enter.native="search()" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字：">
              <el-input v-model="listQuery.keyword"  placeholder="备注"
                        clearable @keyup.enter.native="search()" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="消息类型：">
              <el-select v-model="listQuery.eventType" clearable placeholder="--请选择--">
                <el-option label="图片" value="1"></el-option>
                <el-option label="视频" value="2"></el-option>
                <el-option label="文件" value="3"></el-option>
                <el-option label="位置" value="4"></el-option>
                <el-option label="文本" value="5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="起始时间：">
              <el-date-picker v-model="listQuery.startDate" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="截止时间：">
              <el-date-picker v-model="listQuery.endDate" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search()">
                {{$t('common.search')}}</el-button>
              <el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="wpwork-common-layout-main wpwork-flex-main" style="margin-top: -10px;">
        <wpwork-table v-loading="listLoading" :data="tableData"  :hasNO="false">
          <el-table-column prop="sendPerson" label="发送者" />
          <el-table-column prop="messageType" label="消息类型" />
          <!-- <el-table-column prop="creatorTime" label="消息内容"  /> -->
          <el-table-column prop="receivePerson" label="接收者"  />
          <el-table-column prop="sendTime" label="发送时间" :formatter="wpwork.tableDateFormat"
        />
            <el-table-column label="操作">
            <template slot-scope="scope" v-if="!scope.row.isAdministrator">
              <el-button size="mini" type="text"  @click="handleUpdateState(scope.row)">
                详情
              </el-button>
            </template>
          </el-table-column>
        </wpwork-table>
        <pagination :total="total" :page.sync="listQuery.currentPage"
          :limit.sync="listQuery.pageSize" @pagination="initData" />
      </div>
      <info-dialog ref="infoDialog" />
    </div>
</template>

<script>
import InfoDialog from './InfoDialog.vue'
export default {
  name: 'message',
  components: {
    InfoDialog
  },
  data() {
    return {
      tableData: [],
      listLoading: true,
      listQuery: {
        organizeId: '',
        keyword: '',
        gender: '',
        enabledMark: '',
        currentPage: 1,
        pageSize: 20
      },
      total: 2,
    }
  },
  watch: {
    
  },
  computed: {
    
  },
  created() {
    this.getOrganizeList(true)
  },
  methods: {
    getOrganizeList(isInit) {
      if (isInit) this.initData()
    },
    handleUpdateState(row){
      this.$refs.infoDialog.openDialog({
        imageUrls: row.imageUrls,
        sendPerson: row.sendPerson,
        messageType: row.messageType,
        sendTime: row.sendTime,
        taskStatus: row.taskStatus,
        receivePerson: row.receivePerson,
        text: row.text
      });
    },
    initData() {
      this.listLoading = true
      this.tableData = [
        {
          "id": "1",
          "sendPerson": "测试人员1",
          "messageType":"图片",
          "sendTime":1755500342000,
          "receivePerson":"测试人员2",
          "imageUrls": [
            require('@/assets/images/t4.png')
          ],
          "text":""
        },
        {
          "id": "2",
          "sendPerson": "测试人员2",
          "messageType":"文字",
          "sendTime":1755500342000,
          "receivePerson":"测试人员1",
          "imageUrls": [],
          "text": "你好，这是测试消息！！！"
        },
      ]
      setTimeout(() => {
          this.listLoading = false
       }, 600)
    },
    reset() {
      this.initData()
    },
  }
}
</script>
<style lang="scss" scoped>
.user-form{
  margin-top: 65px;
  height: 92%;
}
@media (max-width: 1268px) { 
  .user-form {
      margin-top: 98px;

  }
}
@media (max-width: 768px) { 
  .user-form {
      margin-top: 168px;

  }
}
>>> .icon-ym {
  font-size: 12px !important;
}
</style>